<template>
  <div class="detail-box">
    <div class="top">
      <div class="title">
        {{ getHospitalName() }}
      </div>
      <div class="level">
        <el-icon style="margin-left: 10px; margin-right: 5px" color="pink"
          ><Pointer
        /></el-icon>
        {{ getHospitalLevel() }}
      </div>
    </div>
    <div class="content">
      <div class="lef">
        <img :src="`data:image/jpeg;base64,` + getHospitalImg()" />
      </div>
      <div class="rig">
        <div>
          <el-icon color="blue"><LocationInformation /></el-icon>
          具体位置：{{ getHospitalPosition() }}
        </div>
        <div>路线规划：{{ getHospitalLine() }}</div>
      </div>
    </div>
    <div class="footer">
      <div class="into-title-hospital">医院介绍</div>
      <div class="intro-contain-hospital">{{ getHospitalInto() }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detailPage",
  methods: {
    // 医院名字
    getHospitalName() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.hosname
        : "";
    },
    getHospitalLevel() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.param
            .hostypeString
        : "";
    },
    getHospitalImg() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.logoData
        : "";
    },
    getHospitalPosition() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.param
            .fullAddress
        : "";
    },
    getHospitalLine() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.route
        : "";
    },
    getHospitalInto() {
      return this.$store.state.hospitalDetail.hospitalInfo.hospital
        ? this.$store.state.hospitalDetail.hospitalInfo.hospital.intro
        : "";
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-box {
  .top {
    height: 40px;
    display: flex;
    align-items: end;
    .title {
      font-size: 30px;
      font-weight: 700;
    }
    .level {
      color: #7f7f7f;
    }
  }
  .content {
    margin-top: 20px;
    display: flex;
    .lef {
      width: 80px;
      margin-right: 20px;
      img {
        width: 80px;
        height: 80px;
      }
    }
    .rig {
      color: #7f7f7f;
      div {
        margin-top: 10px;
      }
    }
  }
  .footer {
    .into-title-hospital {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #7f7f7f;
    }
    .intro-contain-hospital {
      color: #7f7f7f;
      line-height: 30px;
    }
  }
}
</style>
